<template>
  <div>
    <div id="zhexiantu">折线图</div>
    <div id="pie">饼图</div>
    <div id="bdmap"></div>
  </div>
</template>



<script>

import * as echarts from 'echarts';

export default {
  name: "index",
  //created是直接运行的
  created() {},
  mounted() {
    // 调用方法要带括号
    //mounted方法要等到template渲染完了再执行
    this.initzhexiantu();
    this.initpie();
    this.initbdmap();
  },
  methods: {
    initzhexiantu() {
      var chartDom = document.getElementById("zhexiantu");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initpie(){
      var chartDom = document.getElementById('pie');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
    },
    initbdmap(){
      var dom = document.getElementById('bdmap');
      var map = new BMap.Map(dom, {
        coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
                      // 指定完成后API将以指定的坐标类型处理您传入的坐标
      });          // 创建地图实例
      var point = new BMap.Point(111.79060, 40.50205);  // 创建点坐标
      map.centerAndZoom(point, 15);
      var marker = new BMap.Marker(point);        // 创建标注
      map.addOverlay(marker);
      marker.setAnimation(BMAP_ANIMATION_BOUNCE)
    }
  }
};
</script>




<style scoped>
#zhexiantu,#pie,#bdmap {
  width: 500px;
  height: 500px;
}
</style>
